<template>
	<view class="gift-purchase">
	  <view class="header" style="position: fixed;z-index: 99;">
		<view ><uni-status-bar></uni-status-bar></view>
  
		<view  class="search-box flex-cn">
		  <view class="navbar-left flex-cn" style="flex: 1" @click="backHome">
			<view
			  style="width: 100rpx; text-align: center"
			  class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon"
			>
			</view>
		  </view>
  
		  <view
			  style="
				  height: 80rpx;
				  line-height: 80rpx;
				  font-size: 36rpx;
				  font-family: '.PingFang SC, PingFang SC';
				  display: flex;
				  justify-content: center;
				  align-content: center;
				  flex: 1;
				  color: #fff;
			  "
			  >
			  时福礼品卡
			  </view>
			  <view style="width: 320rpx; flex: 1"></view>
		  </view>
			
		  <view class="row_gift">
			  <view class="element_gift" v-for="(item,index) in label" :key="index" >
				  <image class="element_img" :src="item.img" alt=""/>
				  <text class="element_text" >{{item.name}}</text>
			  </view>
		  </view>
		  <view class="card">
				  <view class="card_header">
					  <text >待使用</text>
					  <view >
						<text style="color: #B2856E; font-size:28rpx;" @click="toMycard">查看礼品卡明细 </text>
					  	<image style="width: 12rpx;height: 20rpx;margin-left: 10rpx;" src="/static/images/arrow-right.png"></image>
					  </view>
				  </view>
				  <view class="card_bottom" >
					  <text >{{ waitUseCount }}</text>
					  <text >张</text>
				  </view>
		  </view>
	  </view>
	  <view style="margin-top: 570rpx;"></view>
	  <view v-for="(item,index) in buyList"   :key="index">
		<!-- v-for="(item,listLndex) in val.list"   :key="listLndex" -->
			<view class="slider-container" >
				<view  >
				  <view class="slider">
					  <view class="slider-title">
						  <view class="slider-size">
							  <text>{{ item.gift_card_class_name }}</text>
							  <text>即充即到，面额随心定</text>
						  </view>

						  <view>
							<text>更多</text>
						  	<image style="width: 12rpx;height: 20rpx;margin-left: 10rpx;" src="/static/images/arrow-right.png"></image>
						  </view>
					  </view>
				  </view>
  
				  <view style="height: 100%;" >
					  <scroll-view class="home-icon" scroll-x="true" style="white-space: nowrap">
							<block v-for="(val,listLndex) in item.list" :key="listLndex">
								<view class="min-icon"  >
									<!-- <image src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/6620799d9589d4905.png/6630a70c2d6934381.png" alt="" class="icon-image"></image> -->
									<image :src="val.img_url" alt="" class="icon-image"></image>

									<view class="font-icon">{{ val.title}}</view>
									
									<view class="scroll_bottom"  @click="toBuy(val)">
										<text>{{ Math.floor(val.price[0].money) }}~{{ Math.floor(val.price[val.price.length - 1].money) }}</text>
										<text class="scroll_button">购买</text>
									</view>
								</view>
							</block>
					  </scroll-view>		
				  </view>
			  </view>
			</view>
			
  
	  </view>
  
	</view>
  </template>
  
  <script>
  import qhImage from '../../../../components/qh-image/qh-image.vue';
  export default {
	components: { qhImage },
	data() {
	  return {
		  label:[{img:"https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/6620799d9589d4905.png/66306b67449677836.png",name:'即时到账'},
		  {img:"https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/6620799d9589d4905.png/66306baf0cb6f3391.png",name:'在线送礼'},
		  {img:"https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/6620799d9589d4905.png/66309940af7cb8689.png",name:'自用可转'},
		  {img:"https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/6620799d9589d4905.png/6630998535f235350.png",name:'售后保障'}],
  
		  buyList:[],
		  lastArray:null,
		  waitUseCount:null,
	  };
	},
	onLoad(){
	  this.getPurchaseList()
	  this.getCount()
	},
	methods: {
	  async getPurchaseList(){
		  const { status, data } = await this.$request(
			  "/SmallProgramApi/ShiFu/getGiftCard",
			  { store_id: this.$store.mallStoreId }
		  );
		  this.buyList = data 
		  let  last  = data[0].list[0].price
		  for (var i = 0; i < last.length; i++) {
			// 判断是否为最后一个元素
				if (i === last.length - 1) {
					this.lastArray =  Math.floor(last[i].money)
				}
			}
	  },
	  async getCount(){
		const { status, data } = await this.$request(
			  "/SmallProgramApi/ShiFu/getMyGiftCardCount",
			  { store_id: this.$store.mallStoreId }
		  );
		this.waitUseCount = data.waitUseCount
	  },
	  //后退
	  backHome() {
		uni.navigateBack();
	  },
  
	  toBuy(val){
		let id = val.id

		// if(val.gift_card_class_name == '实物卡'){
		// 	 uni.navigateTo({
		// 		  url: '/pages/mer/tabbar/entityPay/entityPay?id=' + id+'&money='
		// 	 });
		// }

		console.log('是阿斯顿' ,val)
		 uni.navigateTo({
			  url: '/pages/mer/tabbar/gift_mycard/gift_mycard?id=' + id
		 });
	  },

	  toMycard(){
		uni.navigateTo({
			url: '/pages/mer/tabbar/my_gift_mycard/my_gift_mycard',
		});
	  }
  
	},
  };
  </script>
  <style>
  @import "./gift_purchase.scss";
  
  .gift-purchase {
	  height: 100vh;  /* 视窗的高度 */
	  overflow-y: auto;  /* 开启垂直滚动 */
	  width: 100%;
	  background-color: #F0F2EE;
	  padding-bottom: 24rpx;
	  
  }

  </style>
  